<html>

	<head>
		<meta charset="UTF-8">
		<title>合同列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<link rel="stylesheet" href="../../layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/bass.css" />
		<style>
			.layui-form {
				width: 35%;
			}
			
			.layui-input {
				width: 100% !important;
			}
		</style>
	</head>
	<body>
		<div class="body">
			<header class="layui-nav" id="headerTop"></header>
			<div class="left_muen" id="left_menu"></div>
			<div class="content_body">

				<!--标题栏-->
				<p class="content_title">合同管理 &nbsp;&nbsp;>&nbsp;&nbsp;合同新增</p>
				<!--标题栏-->

				<form class="layui-form mt20">
					<div class="layui-form-item">
						<label class="layui-form-label">序号</label>
						<div class="layui-input-block">
							<input type="text" name="id" id="id" lay-verify="required" autocomplete="off" placeholder="请输入序号" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">合同编号</label>
						<div class="layui-input-block">
							<input type="text" name="contractCode" id="contractCode" lay-verify="required" placeholder="请输入合同编号" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">合同名称</label>
						<div class="layui-input-block">
							<input type="text" name="contractName" id="contractName" lay-verify="required" placeholder="请输入合同名称" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">买家</label>
						<div class="layui-input-block">
							<input type="text" name="buyer" id="buyer" lay-verify="required" placeholder="请输入买家" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">合同签订时间</label>
							<div class="layui-input-block">
								<input type="text" name="contractSignDate" id="contractSignDate" lay-verify="date" placeholder="请选择时间" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">卖家</label>
						<div class="layui-input-block">
							<input type="text" name="seller" id="seller" lay-verify="required" placeholder="请输入卖家" autocomplete="off" class="layui-input w30">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">合同有效时间</label>
							<div class="layui-input-inline ml10">
								<input type="text" name="contractEffectiveStartDate" id="contractEffectiveStartDate" lay-verify="date" placeholder="请选择时间" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-form-mid">-</div>
							<div class="layui-input-inline ml10">
								<input type="text" name="contractEffectiveEndDate" id="contractEffectiveEndDate" lay-verify="date" placeholder="请选择时间" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
							<label class="layui-form-label">业务类型</label>
							<div class="layui-input-block">
								<select name="businessType" id="businessType" lay-verify="required" lay-search="">
									<option value="">请选择</option>
									<option value="1">长期</option>
									<option value="2">短期</option>
								</select>
							</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
							<label class="layui-form-label">合同类型</label>
							<div class="layui-input-block">
								<select name="contractType" id="contractType" lay-verify="required" lay-search="">
									<option value="">请选择</option>
									<option value="1">NG</option>
									<option value="2">其他</option>
								</select>
							</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
							<label class="layui-form-label">计量回路</label>
							<div class="layui-input-block layui-form" lay-filter="selFilter">
								<select name="circuitId" id="circuitId" lay-verify="required" lay-search="">

								</select>
							</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item">
						<!--<div class="layui-inline">-->
							<label class="layui-form-label">合同状态</label>
							<div class="layui-input-block layui-form" lay-filter="selFilter">
								<select name="contractStatus" id="contractStatus" lay-verify="required" lay-search="">
									<option value="">请选择</option>
									<option value="1">待生效</option>
									<option value="2">生效</option>
									<option value="3">作废</option>
								</select>
							</div>
						<!--</div>-->
					</div>
					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">描述</label>
						<div class="layui-input-block">
							<textarea name="contractDesc" id="contractDesc" placeholder="请输入描述" class="layui-textarea w30"></textarea>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button type="button" class="layui-btn layui-btn-primary" id="fileUrl">
								<i class="layui-icon">&#xe67c;</i>选择文件
							</button>
							<button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
							<input type="hidden" name="filePath" id="filePath">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<!--预览图片-->
							<div class="layui-upload-list" id="showblock"></div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<div class="layui-btn" lay-submit="" lay-filter="submitFilter">立即提交</div>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="../../js/common/jquery-1.11.3.min.js"></script>
		<script src="../../layui/layui.js"></script>
		<script src="../../js/common/navList.js"></script>
		<script src="../../js/common/ajax.js"></script>
		<script>
			var href = window.location.href;
			var id = href.split("?")[1].split("&")[2].split("=")[1];

			layui.use(['form', 'layedit', 'laydate', 'upload'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate,
					upload = layui.upload;

				//合同签订时间
				laydate.render({
					elem: '#contractSignDate'
				});
				//合同有效时间
				laydate.render({
					elem: '#contractEffectiveStartDate'
				});
				//合同有效时间:
				laydate.render({
					elem: '#contractEffectiveEndDate'
				});

				//初始化页面值
				$.ajax({
					url: baseUrl + "/contract/getById?id=" + id,
					type: "GET",
					dataType: "json",
					success: function(data) {
						var circuitId = data.circuitId;
						$("#id").val(data.id); //合同id
						$("#contractCode").val(data.contractCode); //合同编码
						$("#contractName").val(data.contractName); //合同名称
						$("#buyer").val(data.buyer); //买家
						$("#seller").val(data.seller); //卖家
						$("#contractEffectiveStartDate").val(data.contractEffectiveStartDate); //合同有效时间
						$("#contractEffectiveEndDate").val(data.contractEffectiveEndDate); //合同有效时间
						$("#contractSignDate").val(data.contractSignDate); //合同签订时间
						$("#businessType").val(data.businessType); //业务类型
						$("#contractStatus").val(data.contractStatus);
						$("#contractType").val(data.contractType); //合同类型
						$("#contractDesc").val(data.contractDesc); //描述

						//初始化计量回路下拉框
						$.ajax({
							url: baseUrl + "/meteringcircuit/getList?pageNo=1",
							type: "GET",
							success: function(data) {
								if(data.code == 200) {
									console.log(data.list);
									var datas = data.list;
									$("#circuitId").empty(); //清空下拉框
									$("#circuitId").append("<option value=''>请选择</option>");
									for(var i = 0; i < datas.length; i++) {
										var item = datas[i];
										console.log(item.id + "---" + item.circuitName);
										if(circuitId == item.id) {
											$("#circuitId").append("<option value=" + item.id + " selected='selected' >" + item.circuitName + "</option>");
										} else {
											$("#circuitId").append("<option value=" + item.id + ">" + item.circuitName + "</option>");
										}
									}
									layui.form.render('select'); //重新渲染select
								} else {
									layer.msg("计量回路加载失败", {
										icon: 5
									});
								}
							}
						});

						//初始化文件
						$.ajax({
							url: baseUrl + "/contract/getFileListByContractId?contractId=" + data.id,
							type: "GET",
							success: function(data) {
								console.log(data);
								var urls = [];
								for(var i = 0; i < data.length; i++) {
									$('#showblock').append('<img src="' + baseUrl + "file" + data[i].fileName + '" alt="' + data[i].fileName + '" class="layui-upload-img" style="width:100px;height:100px;border: 1px solid #d0caca;margin: 5px;"  >')
									urls.push(data[i].fileUrl);
								}
								$("#filePath").val(urls); //文件
							}
						});
						layui.form.render('select'); //重新渲染select
					}
				});

				//监听提交
				form.on('submit(submitFilter)', function(data) {
					ajaxPost({
						url: '/contract/update',
						data: {
							id: data.field.id,
							contractCode: data.field.contractCode, //合同编号
							contractName: data.field.contractName, //合同名称
							buyer: data.field.buyer, //买方
							seller: data.field.seller, //卖方
							contractSignDate: data.field.contractSignDate, //合同签订日期
							contractEffectiveStartDate: data.field.contractEffectiveStartDate, //有效开始日期
							contractEffectiveEndDate: data.field.contractEffectiveEndDate, //有效结束日期
							businessType: data.field.businessType, //业务类型
							contractType: data.field.contractType, //合同类型
							contractDesc: data.field.contractDesc, //描述
							contractStatus: data.field.contractStatus, //合同状态
							circuitId: data.field.circuitId, //计量回路
							filePath: data.field.filePath, //文件路径集合
						},
						successFull: function(res) {
							console.log(res)
							layer.msg('修改成功', {
								icon: 6
							});
							window.location.href = "./contractList.html?pos=3&childPos=0";
						},
						errCallBack: function(res) {
							layer.msg(res.msg, {
								icon: 6
							});
						}
					})
				});

				//执行实例
				var filePath = [];
				var uploadInst = upload.render({
					elem: "#fileUrl", //绑定元素
					url: baseUrl + "/contract/upload", //上传接口
					field: "file", //设定文件域的字段名
					accept: "file", //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
					auto: false,
					bindAction: '#uploadBtn',
					multiple: true,
					choose: function(obj) { //文件上传前的回调
						console.log(obj);
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#showblock').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:100px;height:100px;border: 1px solid #d0caca;margin: 5px;"  >')
						});
					},
					done: function(res) {
						//上传完毕回调
						console.log(res);
						if(res.code == 200) {
							filePath.push(res.msg);
						}
						console.log(filePath);
						$("#filePath").val(filePath);
						layer.msg('上传成功', {
							icon: 6
						});
					},
					error: function(res) {
						//请求异常回调
						console.log(res);
					}
				});

			});
		</script>
	</body>

</html>